<script setup lang="ts">
import useAuth from '../../composition/useAuth'
import captha from '../../components/captha.vue'
import { useRouter } from 'vue-router'
import { Storage } from '../../utils/localStorage'
import { useUserStore } from '../../store/userStore'

const userStore = useUserStore()
const storage = new Storage()
const { form, login } = useAuth()
const router = useRouter()
const toLogin = async () => {
   login()
      .then(async (res) => {
         storage.setStorage('token', { token: res.data.token })
         await userStore.getUserInfo()
         router.push({ name: 'home' })
      })
      .catch((error) => {
         return error
      })
}
</script>

<template>
   <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
      integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
      crossorigin="anonymous" />
   <div class="min-h-screen flex flex-col items-center justify-center">
      <div class="flex flex-col bg-white px-4 sm:px-6 md:px-8 lg:px-10 py-8 rounded-3xl w-50 max-w-md">
         <div class="self-center text-2xl font-bold sm:text-3xl text-gray-800">Sign In</div>
         <div class="my-5 self-center text-sm font-medium sm:text-sm text-gray-800">
            A programmer like a bull and a horse
         </div>

         <div class="mt-2">
            <div class="flex flex-col mb-5">
               <label for="email" class="mb-1 text-xs tracking-wide text-gray-600">UserName:</label>
               <div class="relative">
                  <div class="inline-flex items-center justify-center absolute left-0 top-0 h-full w-10 text-gray-400">
                     <i class="fas fa-at text-blue-500"></i>
                  </div>

                  <input
                     id="email"
                     type="text"
                     name="email"
                     class="text-sm placeholder-gray-500 pl-10 pr-4 rounded-2xl border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400"
                     placeholder="Enter your username"
                     v-model="form.username" />
               </div>
            </div>
            <div class="flex flex-col mb-6">
               <label for="password" class="mb-1 text-xs sm:text-sm tracking-wide text-gray-600">Password:</label>
               <div class="relative">
                  <div class="inline-flex items-center justify-center absolute left-0 top-0 h-full w-10 text-gray-400">
                     <span>
                        <i class="fas fa-lock text-blue-500"></i>
                     </span>
                  </div>

                  <input
                     id="password"
                     type="password"
                     name="password"
                     class="text-sm placeholder-gray-500 pl-10 pr-4 rounded-2xl border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400"
                     placeholder="Enter your password"
                     v-model="form.password" />
               </div>
            </div>

            <captha v-model:captcha_key="form.capthaKey" v-model:captcha_value="form.capthaValue" />

            <div class="flex w-full">
               <button
                  type="submit"
                  class="flex mt-2 items-center justify-center focus:outline-none text-white text-sm sm:text-base bg-blue-500 hover:bg-blue-600 rounded-2xl py-2 w-full transition duration-150 ease-in">
                  <span class="mr-2 uppercase" @click="toLogin()">Sign In</span>
                  <span>
                     <svg
                        class="h-6 w-6"
                        fill="none"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                     </svg>
                  </span>
               </button>
            </div>
         </div>
      </div>
      <div class="flex justify-center items-center mt-6">
         <span class="inline-flex items-center text-gray-700 font-medium text-xs text-center">
            <span class="ml-2"
               >You don't have an account?
               <span @click="$router.push({ name: 'register' })" class="text-xs ml-2 text-blue-500 font-semibold"
                  >Register now</span
               ></span
            >
         </span>
      </div>
   </div>
</template>
